<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <title>主页面1111</title>
</head>

<body>
    <div id="adddiv">
        <button class="fade">×</button>
        <span style="margin: 0 aute;font-size: 20px;font-weight: 600;">添加栏目:</span>
        <div class="from">
            <div>序号：<input type="text" class="addinput" placeholder=" 请输入您要添加的人的序号"></div>
            <div>姓名：<input type="text" class="addinput" placeholder=" 请输入您要添加的人的姓名"></div>
            <div>性别：<input type="text" class="addinput" placeholder=" 请输入您要添加的性别"></div>
            <div>年龄：<input type="text" class="addinput" placeholder=" 请输入您要添加的人的年龄"></div>
            <div>电话：<input type="text" class="addinput" placeholder=" 请输入您要添加的人的电话"></div>
            <button id="addbut" onclick="addp()">确定添加</button>
        </div>
    </div>
    <div id="revisediv">
        <button class="fade">×</button>
        <span style="margin: 0 aute;font-size: 20px;font-weight: 600;">修改栏目:</span>
        <div class="from">
            <div>序号：<input type="text" class="reviseinput" oninput="autointo()" placeholder="请输入您要修改人的序号"></div>
            <div>姓名：<input type="text" class="reviseinput" placeholder=" 请输入您要修改人的姓名"></div>
            <div>性别：<input type="text" class="reviseinput" placeholder=" 请输入您要修改人的性别"></div>
            <div>年龄：<input type="text" class="reviseinput" placeholder=" 请输入您要修改人的年龄"></div>
            <div>电话：<input type="text" class="reviseinput" placeholder=" 请输入您要修改人的电话"></div>
            <button id="revisebut" onclick="revisep()">确定修改</button>
        </div>
    </div>
    <div id="finddiv">
        <button class="fade">×</button>
        <span style="margin: 0 aute;font-size: 20px;font-weight: 600;">查找栏目:</span>
        <div class="findt">
            <div>序号：<span class="findtext">请先输入正确序号</span></div>
            <div>姓名：<span class="findtext">请先输入正确序号</span></div>
            <div>性别：<span class="findtext">请先输入正确序号</span></div>
            <div>年龄：<span class="findtext">请先输入正确序号</span></div>
            <div>电话：<span class="findtext">请先输入正确序号</span></div> 
        </div>
    </div>
    <div class="max-box">
        <div class="choose">
            <a id="add" href="javascript:;">添加</a>
            <a id="revise" href="javascript:;">修改</a>
            <div style="width: 280px;height:30px;display: flex;">
                <input type="text" class="findinput" placeholder=" 请输入您要寻找人的序号">
                <a href="javascript:;" class="findbon" onclick="find()">搜索</a>
            </div>
        </div>
        <div style="height: 450px;overflow-y: scroll;margin-top: 10px;border: .5px black solid;">
            <table class="record">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>电话</th>
                    <th>删除栏目</th>
                </tr>
                <tr>
                    <td>001</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>15038727708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>48</td>
                    <td>19533387708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>19</td>
                    <td>18888888808</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>22</td>
                    <td>12248458778</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>22</td>
                    <td>12248458778</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>22</td>
                    <td>12248458778</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>22</td>
                    <td>12248458778</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>19</td>
                    <td>18888888808</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>009</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>19</td>
                    <td>18888888808</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>010</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>19</td>
                    <td>18888888808</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>011</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>15038727708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>012</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>15038727708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>013</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>18</td>
                    <td>15038727708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>014</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>48</td>
                    <td>19533387708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
                <tr>
                    <td>015</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>48</td>
                    <td>19533387708</td>
                    <td><a class="delete" href="javascript:;">删除信息</a></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

</html>